import {
  Button,
  Modal,
  Select,
  message,
  Checkbox,
  Input,
  Radio,
} from "antd";
import { connect } from "dva";
import React from "react";
import moment from "moment";
import { Form } from '@ant-design/compatible';
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
@connect((state) => ({
  overdueCar: state.overdueCar,
  menu: state.menu,
}))
class SendMsgModal extends React.Component {
  state = {
    userList: [
      { opUser: "1", userName: "人员" },
      { opUser: "2", userName: "人员2" },
    ],
  };

  componentDidMount() {}

  handleOk = () => {
    const { dispatch, form, record, userList } = this.props;
    form.validateFields({ force: true }, (err, values) => {
      if (err) {
        return;
      }
      let params = {
        businessCode: "over-due-log",
        // businessId: record.sid,
        vin: record.vin,
        ...values,
        // warnChannel: values.warnChannel.join(','),
        warnReceiver: values.warnReceiver.join(","),
        warnReceiverName: values.warnReceiver
          .map((opUser) => {
            return userList.find((item) => item.opUser === opUser)?.opUser;
          })
          .join(","),
      };
      // params.warningEmail = values.emailList.join(",")
      // delete params.emailList

      dispatch({
        type: "overdueCar/postObjWithRes",
        payload: {
          url: "/mscreditbusiness/vehicle/risk/warn/sendRiskMsg",
          ...params,
        },
        callback: (response) => {
          if (response.statusCode === "0") {
            message.success("发送成功");
            this.onCancel();
          } else {
            // message.error(response.statusMessage);
          }
        },
      });
    });
  };
  warnChannelChange = (e) => {
    console.log("warnChannel", e.target.value);
    const warnChannel = e.target.value;
    const {
      form: { setFieldsValue },
      record,
    } = this.props;
    let riskWarnMsg = `车辆${record?.vin}的逾期天数已有${
      record?.overdueDays || "-"
    }天`;
    // if (warnChannel == 'sms') {
    //   riskWarnMsg = `${record?.overdueDate ? moment(record?.overdueDate).format('YYYY-MM-DD HH:mm:ss') : ''}系统发现车辆${record?.vin}的逾期天数已有${record?.daysOverdue}天`
    // } else if (warnChannel == 'email') {
    //   riskWarnMsg = `车辆${record?.vin}的逾期天数已有${record?.daysOverdue || '-'}天`
    // } else {
    //   riskWarnMsg = `车辆${record?.vin}的逾期天数已有${record?.daysOverdue || '-'}天`
    // }
    setFieldsValue({ riskWarnMsg });
  };
  onCancel = () => {
    const { form, changeVisible } = this.props;
    form.resetFields();
    changeVisible();
  };
  render() {
    // const { userList } = this.state
    const { getFieldDecorator } = this.props.form;

    const { visible, changeVisible, userList } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const transferUser = (arrayData = []) =>
      arrayData.map((item) => (
        <Option key={item.opUser}>{item.opUser}</Option>
      ));
    const warningTypeOptions = [
      {
        //   value: 'stationLetter',
        //   label: '站内信'
        // }, {
        value: "sms",
        label: "短信",
      },
      {
        value: "email",
        label: "邮件",
      },
    ];
    return (
      <Modal
        title="管理告警"
        width={750}
        onCancel={() => changeVisible()}
        visible={visible}
        footer={[
          <Button key="back" size="default" onClick={this.onCancel}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            size="default"
            onClick={this.handleOk}
          >
            提交
          </Button>,
        ]}
      >
        <Form>
          <FormItem label="请选择需要告警的人员" {...formItemLayout}>
            {getFieldDecorator("warnReceiver", {
              rules: [{ required: true, message: "请选择需要告警的人员" }],
            })(
              <Select allowClear mode="multiple" placeholder="请选择">
                {transferUser(userList)}
              </Select>
            )}
          </FormItem>
          <FormItem label="请选择告警方式" {...formItemLayout}>
            {getFieldDecorator("warnChannel", {
              rules: [{ required: true, message: "请选择告警方式" }],
            })(
              <Radio.Group
                options={warningTypeOptions}
                onChange={this.warnChannelChange}
              />
            )}
          </FormItem>
          <Form.Item label="请确认告警内容" {...formItemLayout}>
            {getFieldDecorator("riskWarnMsg", {
              rules: [{ required: true, message: "请填写告警内容" }],
            })(<TextArea rows={4} maxLength={128} allowClear />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
export default connect()(Form.create()(SendMsgModal));
